<template>
  <div class="boxy">
    <div class="header">
      <div class="loggin">
        <van-uploader capture:true :max-count="1" v-model="fileList" multiple />
        <!-- <div>
          <img src="http://39.105.231.166:7002/static/toux.jpg" alt="" />
        </div>
        <span @click="removeIMg">x</span>
      </div>
      <div v-show="isShow" class="loggin editIMg">
        <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
        <input
          multiple="multiple"
          type="file"
          accept="image/*"
          class="van-uploader__input"
        />-->
      </div>
      <div class="login">
        <p v-if="!Longinflag" @click="loginPush">立即登录</p>
        <p v-else @click="quit">退出登录</p>
        <li>积分：{{ day }}</li>
      </div>
    </div>

    <div class="light">
      <p>
        <van-icon name="volume-o" />
      </p>
      <div class="lin">
        <marquee width="100%" direction="left" scrollamount="8"
          >新上线更稳定的付费快递查询接口</marquee
        >
      </div>
    </div>

    <div class="order">
      <header @click="$router.push({ path: '/myOrder' })">
        <aside>
          <p class="iocnColor">
            <i class="van-icon van-icon-notes-o"><!----></i>
          </p>
          <p>我的订单</p>
        </aside>

        <article>
          <p>
            <i class="van-icon van-icon-arrow"><!----></i>
          </p>
        </article>
      </header>
      <footer>
        <div>
          <p><van-icon name="paid" /></p>
          <p>代付款</p>
        </div>
        <div>
          <p>
            <van-icon name="exchange" />
          </p>
          <p>代发货</p>
        </div>
        <div>
          <p>
            <van-icon name="logistics" />
          </p>
          <p>待收货</p>
        </div>
        <div @click="$router.push('/myEvaluate')">
          <p>
            <van-icon name="smile-comment-o" />
          </p>
          <p>待评价</p>
        </div>
      </footer>

      <div class="details">
        <div>
          <p style="color: red;">
            <i class="iconfont icon-xianjinyue"></i>
          </p>
          <p>我的余额</p>
        </div>
        <div>
          <p style="color: #f86650;">
            <i class="van-icon van-icon-edit"><!----></i>
          </p>
          <p>我的砍价</p>
        </div>
        <div @click="$router.push('/myRoll')">
          <p style="color:#edb449 ;">
            <i class="van-icon van-icon-coupon-o"><!----></i>
          </p>
          <p>我的礼券</p>
        </div>
        <div>
          <p style="color:#f0c169 ;">
            <i class="van-icon van-icon-star-o"><!----></i>
          </p>
          <p>我的收藏</p>
        </div>
        <div @click="$router.push('/site')">
          <p style="color: #5a9fec;">
            <i class="iconfont icon-dizhi"></i>
          </p>
          <p>我的地址</p>
        </div>
        <div>
          <p style="color: #5a9fec;">
            <i class="van-icon van-icon-service-o"><!----></i>
          </p>
          <p>联系客服</p>
        </div>
      </div>

      <div class="min">
        The work of liu tao
      </div>

      <div class="not"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Toast } from "vant";
let isShow = ref(false);
let Longinflag = ref(false);
import { useRouter } from "vue-router";
import { punch } from "@/api/user.js";
let day = ref(0);
let router = useRouter();
const fileList = ref([
  { url: "http://39.105.231.166:7002/static/toux.jpg" },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
]);
function removeIMg() {
  console.log(1);
  isShow.value = true;
}
// 退出登录
function quit() {
  window.localStorage.removeItem("token");
  Longinflag.value = false;
  Toast.success("退出登录成功");
}
// 登录
if (localStorage.getItem("token")) {
  Longinflag.value = true;
}
let token = localStorage.getItem("token");
// 积分
punch(token).then((res) => {
  res.result.forEach((element) => {
    day.value += element.score;
  });
});
function loginPush() {
  console.log(1);
  if (localStorage.getItem("token")) {
    Longinflag.value = true;
    Toast.success("登录成功");
  } else {
    router.push("/login");
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-uploader__upload {
  border-radius: 100%;
}
::v-deep .van-image__img {
  border-radius: 100% !important;
}
::v-deep .van-uploader__input {
  border-radius: 100%;
}
::v-deep .van-uploader__preview-delete {
  border-radius: 100%;
  right: -5px;
  top: -10px;
  border: 3px solid rgb(255, 255, 255);
  background-color: rgb(134, 131, 131);
}

.header {
  width: 100%;
  height: 320px;
  background-color: #c1b18f;
  display: flex;
  align-items: center;
  .loggin {
    width: 23%;
    height: 51%;
    position: relative;
    margin: 0 30px;
    img {
      width: 160px;
      height: 160px;
      border-radius: 100%;
      flex-shrink: 0;
    }
    span {
      width: 25px;
      height: 25px;
      border-radius: 100%;
      color: #ccc;
      font-size: 12px;
      background-color: rgb(129, 123, 123);
      display: block;
      text-align: center;
      line-height: 25px;
      border: 1px solid rgb(235, 235, 235);
      position: absolute;
      top: -10px;
      right: -5px;
    }
  }
}
.login {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  p {
    color: #fff;
    font-size: 0.6rem;
  }
  li {
    width: 2.54rem;
    padding: 0 12px;
    height: 0.7rem;
    color: rgb(240, 236, 236);
    background: #b3a078;
    border-radius: 0.0694444444rem;
    line-height: 0.7rem;
    font-size: 0.2rem;
  }
}
.light {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  font-size: 26px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #e04a4d;
  p {
    width: 10%;
  }
  div {
    width: 90%;
  }
}
.order {
  width: 100%;
  height: 270px;
  background-color: #fff;
  margin-top: 26px;
  .iocnColor {
    color: #f7b94b;
    font-size: 42px;
  }
  header {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid rgb(204, 200, 200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    padding: 0 20px;
    aside {
      display: flex;
      align-items: center;
      p {
        margin: 0 10px;
        font-size: 27px;
        color: rgb(78, 76, 76);
      }
    }
    article {
      display: flex;
    }
  }

  footer {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 120px;
      height: 120px;
      align-items: center;
      p {
        color: rgb(97, 94, 94);
        &:nth-of-type(1) {
          font-size: 60px;
        }
        &:nth-of-type(2) {
          font-size: 26px;
        }
      }
    }
  }
}
.details {
  width: 100%;
  height: 320px;
  background-color: #fff;
  margin-top: 26px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  div {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 120px;
    p {
      color: rgb(97, 94, 94);

      &:nth-of-type(2) {
        font-size: 26px;
      }
      i {
        &:nth-of-type(1) {
          font-size: 55px;
        }
      }
    }
  }
}
.min {
  width: 100%;
  height: 50px;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  color: rgb(121, 120, 120);
}
.not {
  width: 100%;
  height: 50%;
  background-color: #fff;
}
.editIMg {
  background-color: rgb(255, 254, 254);
  width: 230px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  border-radius: 100%;
}
</style>
